import 'package:flutter/material.dart';

main() => runApp(StageApp());

class StageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeProductPage(),
    );
  }
}

class HomeProductPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('状态'),
      ),
      body: NumContent("hello stateful"),
    );
  }
}

// 无状态商品列表
class HomeProductBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        HomeProductItem("title1", "content1",
            "https://cdn.pixabay.com/photo/2020/04/04/16/07/stadttheater-5002861_1280.jpg"),
        SizedBox(height: 10),
        HomeProductItem("title2", "content2",
            "https://cdn.pixabay.com/photo/2021/02/08/16/03/dinosaur-5995333__480.png"),
        SizedBox(height: 10),
        HomeProductItem("title3", "content3",
            "https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__480.jpg"),
      ],
    );
  }
}

class HomeProductItem extends StatelessWidget {
  final String title;
  final String content;
  final String image;

  HomeProductItem(this.title, this.content, this.image);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      decoration:
          BoxDecoration(border: Border.all(width: 2, color: Colors.grey)),
      child: Column(
        children: [
          Text(
            title,
            style: TextStyle(fontSize: 22, color: Colors.orange),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            content,
            style: TextStyle(fontSize: 18, color: Colors.black87),
          ),
          SizedBox(
            height: 10,
          ),
          Image.network(image)
        ],
      ),
    );
  }
}

// 有状态计数器
class NumContent extends StatefulWidget {
  final String message;

  NumContent(this.message);

  @override
  _NumContentState createState() => _NumContentState();
}

/// StatefulWidget设计再State中原因：
/// 1.build出来的Widget是需要依赖State中的变量(状态/数据)
/// 2.在Flutter运行过程中：Widget是不断销毁和创建的；当自己的状态发生改变时，并不希望重新创建一个Stage

// State要想使用StatefulWidget传过来的参数：使用构造函数；直接使用父类内部的widget对象，该widget就是StatefulWidget
class _NumContentState extends State<NumContent> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _buildRowWidget(),
        Text("${widget.message}--当前计数：$_counter",
            style: TextStyle(fontSize: 28))
      ],
    );
  }

  Widget _buildRowWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RaisedButton(
          onPressed: () {
            // 可以重新执行build方法，重建Widget，以及更新状态(此处为_counter)
            setState(() {
              _counter++;
            });
          },
          color: Colors.red,
          child: Text(
            '+',
            style: TextStyle(fontSize: 18, color: Colors.white),
          ),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              _counter--;
            });
          },
          color: Colors.blue,
          child: Text(
            '-',
            style: TextStyle(fontSize: 18, color: Colors.white),
          ),
        ),
      ],
    );
  }
}
